在網頁中，HTML 存放網頁的內容與架構，CSS 標記內容的呈現樣式；
而 JavaScript 則用來產生豐富的互動效果或應用程式。

之前筆記分享過，為什麼要使用HTML5,

HTML5更加語義化，使用HTML5 我們不必在網頁上佈滿沒有意義的div。
HTML5改為有意義的tag，
比如 navigations 和 footers 使語法更有意義，
加入語意的資料能讓搜尋引擎等網站準確顯示。

HTML5+CSS3+JavaScript API

HTML5要結合JavaScript API一起使用，可以更增加網頁的互動性。

那麼...JavaScript是什麼?

在網頁瀏覽器中通稱的「JavaScript」是由眾多截然不同的要素所構成。
其中之一是核心語言（ECMAScript），
另一個則是 DOM（文件物件模型，Document Object Model）。

* 什麼是DOM (document object model)物件檔案模型?

DOM是一種介面的定義。
DOM的內容其實可以分為三個部份：DOM core、HTML DOM與XML DOM。
其中DOM Core是最基本的底層架構(核心)，主要是將Document架構為一個樹(Tree)的概念，
Tree的組成成份就是節點(Node)，每個DOM必須要有一個document的根節。每個元素在DOM裡面就是一個節點。

當一個.html檔被以瀏覽器開啟的時候，瀏覽器就會去解析該檔案的DOM。
由於瀏覽器可以處理html跟XML的DOM，所以也有人稱DOM檔案樹為html檔案樹或者XML檔案樹。

事實上就是指 document 中元素，
對應到的 JavaScript 物件，我們就統稱為 dom。

var img = document.getElementById("img2");

這個 img 就是範例中 img 標籤對應到 JS 世界的 dom 元素。

不管是什麼DOM，都有對應的物件架構，
每個物件有其屬性、方法(Method)與界面(Interface)，
讓外界可以讀寫其內容；對外界程式設計人員而言，這些方法界面，統稱API (Application Programming Interface)

範例參考:
網站系統規劃 - 基本網頁元素介紹， JS BY TonyQ大大
http://ithelp.ithome.com.tw/question/10099322?tab=opinion

相關資料來源:
JavaScript 技術概觀
https://developer.mozilla.org/zh-TW/docs/JavaScript_technologies_overview
複雜的DOM檔案樹(圖片來源)
http://yiyingloveart.blogspot.tw/2012_04_01_archive.html
DOM and HTML DOM
http://www.wretch.cc/blog/yannfarn/13045018